<template>
  <CommonCard>
    <div class="flex flex-col h-full">
      <!-- Header -->
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold text-gray-800">热歌榜</h2>
        <el-radio-group v-model="timeRange" size="small">
          <el-radio-button v-for="opt in timeOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- Table -->
      <div class="flex-1 overflow-y-auto">
        <el-table :data="topSongs" style="width: 100%" height="100%" :header-cell-style="{ background: 'transparent' }">
          <el-table-column type="index" label="排名" width="80" align="center">
            <template #default="{ $index }">
              <span class="font-bold text-lg" :class="getRankClass($index)">{{ $index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="song_name" label="歌曲"width="150">
            <template #default="{ row }">
              <NuxtLink :to="`/singing/song?name=${row.song_name}`" class="text-blue-500 hover:text-blue-700 hover:underline">
                {{ row.song_name }}
              </NuxtLink>
            </template>
          </el-table-column>

          <el-table-column prop="perform_count" label="演唱次数" >
            <template #default="{ row }">
              <div class="flex items-center">
                <div class="w-full bg-gray-200 rounded-full h-4 mr-4">
                  <div 
                    class="bg-gradient-to-r from-primary-light-3 to-primary-dark-2 h-4 rounded-full transition-all duration-500"
                    :style="{ width: getBarWidth(row.perform_count) }"
                  ></div>
                </div>
                <span class="text-sm min-w-[50px]" style="color: var(--el-color-primary); font-weight: bold;">
                  {{ row.perform_count }} 次
                </span>
              </div>
            </template>
          </el-table-column>
          
          <template #empty>
            <div class="flex justify-center items-center h-full text-gray-500">
              暂无数据
            </div>
          </template>
        </el-table>
      </div>
    </div>
  </CommonCard>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { Song } from '~/types/song'

type TimeRange = 'all' | '1m' | '3m' | '1y';

const timeRange = ref<TimeRange>('all')
const topSongs = ref<Song[]>([])

definePageMeta({
  navTitle: '热歌榜',
  order: 1
})
const timeOptions = [
  { label: '全部', value: 'all' },
  { label: '近1月', value: '1m' },
  { label: '近3月', value: '3m' },
  { label: '近1年', value: '1y' },
]

// Dynamically import JSON data based on timeRange
watch(timeRange, async (newRange) => {
  try {
    const data = await import(`../../server/data/top-songs-${newRange}.json`)
    topSongs.value = data.default
  } catch (error) {
    console.error(`Could not load song data for range: ${newRange}`, error)
    topSongs.value = []
  }
}, { immediate: true }) // immediate: true ensures it runs on initial load

const minCount = computed(() => topSongs.value.length ? Math.min(...topSongs.value.map(s => s.perform_count)) : 0)
const maxCount = computed(() => topSongs.value.length ? Math.max(...topSongs.value.map(s => s.perform_count)) : 1)

const getBarWidth = (count: number) => {
  const range = maxCount.value - minCount.value
  if (range === 0) return '10%' // Avoid division by zero and give a minimum width
  // Normalize the width and ensure a minimum of 10% for visibility
  const width = ((count - minCount.value) / range) * 90 + 10
  return `${width}%`
}

const getRankClass = (index: number) => {
  if (index === 0) return 'text-red-500'
  if (index === 1) return 'text-orange-500'
  if (index === 2) return 'text-yellow-500'
  return 'text-gray-500'
}
</script>

<style>
/* Remove default table bottom border */
.el-table__inner-wrapper::before {
  display: none;
}
/* Make table background transparent */
.el-table, .el-table__expanded-cell {
  background-color: transparent !important;
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
</style>